<template>

    <!--筛选条件-->
    <div class="shaixuan3">
        <div style="margin-top: 15px;">
            <el-input placeholder="搜索关键词" v-model="input" class="input-with-select" style="width: 400px;" size="mini">
                <el-select v-model="typeinput" slot="prepend" placeholder="请选择"  style="width: 130px;" >
                    <el-option label="用户昵称" value="1"></el-option>
                    <el-option label="用户手机号" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="searchtype"></el-button>
            </el-input>
            <el-select filterable  v-model="zhujiao" placeholder="接量助教" @change="zhujiaochange" style="margin-left: 10px;width: 130px;" size="mini">
                <el-option
                    v-for="item in zhujiaos"
                    :key="item.userid"
                    :label="item.name"
                    :value="item.userid">
                </el-option>
            </el-select>
            <el-select filterable  v-model="zhujiao2" placeholder="直播邀请助教" @change="zhujiaochange" style="margin-left: 10px;width: 130px;" size="mini">
                <el-option
                    v-for="item in zhujiaos2"
                    :key="item.tutor_id"
                    :label="item.tutor_nickname"
                    :value="item.tutor_id">
                </el-option>
            </el-select>
            <el-select v-model="online" placeholder="是否在线" @change="onlinechange" style="margin-left: 10px;width: 130px;" size="mini">
                <el-option
                    v-for="item in onlines"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 20px;"  size="mini"   @click="resetForm('searchinput')">重置</el-button>
            <PersButton type="text" size="mini" icon="el-icon-refresh" perms="sys:role:del" label="刷新" @click="refresh()"></PersButton>
            <vue-json-excel
                style="display: inline;margin-left: 10px;"
                :data="tableData1"
                :fields="excelFields"
                name="导出用户数据.xlsx"
                type="xlsx"
            >
                <el-button size="mini">导出</el-button>
            </vue-json-excel>
        </div>
        <div class="first_table">
            <el-row>
                <el-col :span="24">
                    <div class="yixuan">已选 {{ multipleSelectioncount }} <el-button @click="piliangshanchu" type="text">批量删除</el-button></div>
                </el-col>
            </el-row>
            <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column align="center" fixed header-align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" fixed  width="55" label="序号"  prop="id"></el-table-column>
                <el-table-column  align="center" fixed header-align="center" prop="wx_avatarurl" width="100" label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" fixed header-align="center" prop="nickname"  width="150" label="用户昵称"></el-table-column>
                <el-table-column align="center"  header-align="center" prop="phone"  width="150"  label="手机号"></el-table-column>
                <el-table-column align="center"  header-align="center" prop="jieliangzhujiao" width="200" label="接量助教"> </el-table-column>
                <el-table-column align="center"  header-align="center" prop="yaoqingzhujiao"  width='250' label="直播邀请助教">
                    <template slot-scope="scope">
                        {{ scope.row.yaoqingzhujiao=='-' ? '-' :scope.row.yaoqingzhujiao+'-' }}
                        <el-button type="default" size="mini" @click="yaoqingzhujiao(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center"  header-align="center" width='150' prop="online_status" label="直播间在线">
                    <template slot-scope="scope">
                        <span >
                            {{ scope.row.online_status == 1 ? '在线' : '离线' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center"  header-align="center" prop="zaixian_shichang" width='250'  label="累计在线时长"></el-table-column>
                <el-table-column align="center"  header-align="center" prop="dianji_xiangqing" width='250' label="点击详情">
                    <template slot-scope="scope">
                        <span style="font-size: 8pt;">{{ scope.row.typename=='-' ? '-' :scope.row.typename+'-' }}</span>
                        <el-button size="mini" type="default" @click="dianji_xiangqing_click(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center"  header-align="center" prop="shijian"  width='250' label="提单未付款">
                    <template slot-scope="scope">
                        {{ scope.row.shijian=='-' ? '-' :scope.row.shijian+'-' }}
                        <el-button size="mini" type="default" @click="payorder_click(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center"   header-align="center" prop="payorder"  width='250' label="课程购买记录">
                    <template slot-scope="scope">
                        {{ scope.row.payorder=='-' ? '-' :scope.row.payorder+'-' }}
                        <el-button size="mini" type="default" @click="payorder_click(scope.row)">明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center"  header-align="center" prop="_id" width='250' label="操作">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" icon="fa  fa-pencil" perms="sys:role:del" label="详情" @click="chakan(scope.row)"></PersButton>
                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="del(scope.row)"></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


<script>
    import VueJsonExcel from "vue-json-excel";



    import {
        getZhuJiaoInfo,
        getYaoqingZhujiao2,
        getUserInfo,
        pldelUserInfo,
        delUserInfo
    } from '@/api/live/action'; 
    import {
        getUserInfoDc,
        getShijian,
        getpayorder
    } from '@/api/live/daochu';
    import PersButton from '@/components/PersButton';

    export default {
        components:{
            VueJsonExcel,
            PersButton
        },
        props:{
            liveId:{
                type:String,
                default:''
            },
        },
        data(){
            return {
                dianji_xiangqing:'',
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                input:'',
                tableData:[],
                tableData1:[],
                loading: false,
                multipleSelectioncount: 0,
                online:'',
                typeinput:'1',
                zhujiao:'',
                zhujiao2:'',
                zhujiaos: [],
                zhujiaos2: [],
                onlines: [
                    {
                    value: '',
                    label: '是否在线'
                    },{
                    value: 1,
                    label: '是'
                    }, {
                    value: 0,
                    label: '否'
                    }
                ],
                excelFields: {
                    "序号": "id",
                    "用户头像": "wx_avatarurl",
                    "用户昵称": "nickname",
                    "手机号": "phone",
                    "接量助教": "jieliangzhujiao",
                    "直播邀请助教": "yaoqingzhujiao",
                    "累计在线时长": "zaixian_shichang",
                    "点击详情": "djxq",
                    "提单未付款": "tdwfk",
                    "课程购买记录": "kcgmjl"
                },
            }
                
        },
        created(){

            getZhuJiaoInfo({}).then((res) => {
                    if (res.code == 200) {
                        this.zhujiaos = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                });
                let _param = {
                    liveId:this.$props.liveId,
                }
                getYaoqingZhujiao2(_param).then((res) => {
                    if (res.code == 200) {
                        this.zhujiaos2 = res.data.list;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.input = '';
                this.zhujiao = '';
                this.zhujiao2 = '';
                this.online = '';
                this.init();
            },
            init(){

                let _param = {
                    liveId:this.$props.liveId,
                    typeinput:this.typeinput,
                    input:this.input,
                    zhujiao:this.zhujiao,
                    zhujiao2:this.zhujiao2,
                    online:this.online,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }

                getUserInfo(_param).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.list;
                        this.total = res.data.total;
                    } else {
                        this.msgError(res.msg);
                    }
                })
                
                let _param1 = {
                    liveId:this.$props.liveId,
                    typeinput:this.typeinput,
                    input:this.input,
                    zhujiao:this.zhujiao,
                    zhujiao2:this.zhujiao2,
                    online:this.online,
                    pageSize:99999999999,
                    pageNumber:this.pageNumber
                }
                
                getUserInfoDc(_param1).then((res) => {
                    if (res.code == 200) {
                        let data = res.data.list;
                        // for (let i = 0; i < data.length; i++) {
                        //     let _param2 = {
                        //         liveId:this.$props.liveId,
                        //         input:'',
                        //         type:'',
                        //         user_id:data[i]['live_user_id'],
                        //         pageSize:9999999999999,
                        //         pageNumber:this.pageNumber
                        //     }
                        //     let shijian = [];
                        //     let shijian1 = '';
                        //     getShijian(_param2).then((sj)=>{
                        //         let data1 = sj.data.list;
                        //         for (let j = 0; j < data1.length; j++) {
                        //             shijian.push(data1[j]['typename']+':'+data1[j]['dianji_time']);
                        //         }
                        //         console.log('[1-1]时间点击：',shijian);
                        //         shijian1 = shijian.join(',');
                        //         data[i]['djxq'] = data[i]['shijian']+':'+shijian1;
                        //     })
                        //
                        //
                        //     let _param3 = {
                        //         input:'',
                        //         state:'',
                        //         liveId:this.$props.liveId,
                        //         user_id:data[i]['live_user_id'],
                        //         pageSize:9999999999999,
                        //         pageNumber:this.pageNumber,
                        //         fliter:1,
                        //     }
                        //     let wfk = [];
                        //     let wfk1 = '';
                        //     getpayorder(_param3).then((wf)=>{
                        //         let data2 = wf.data.list;
                        //         for (let k = 0; k < data2.length; k++) {
                        //             wfk.push(data2[k]['coursename']+':'+data2[k]['pay_time']);
                        //         }
                        //         console.log('[1-2]支付点击：',wfk);
                        //         wfk1 = wfk.join(',');
                        //         data[i]['tdwfk'] = data[i]['shijian']+':'+wfk1;
                        //         //课程购买记录
                        //         data[i]['kcgmjl'] = data[i]['payorder'].$wfk1;
                        //     })
                        // }
                        this.tableData1 = data;
                    } else {
                            this.msgError(res.msg);
                    }
                })
                            

            },
            handleSizeChange: function (e) {
                console.log(e);
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange: function (e) {
                console.log(e);
                this.pageNumber = e;
                this.init();
            },
            searchtype(e){
                this.init();
            },
            onlinechange(e){
                this.init();
            },
            zhujiaochange(e){
                this.init();
            },
            //已选
            handleSelectionChange: function (e) {
                console.log(e);
                let selectChang = []
                for (let item of e) {
                    selectChang.push(item._id)

                }
                this.multipleSelection = selectChang;
                this.multipleSelectioncount = selectChang.length;
                console.log(selectChang);
            },
            //批量删除
            piliangshanchu: function (e) {
                this.$confirm('确定批量删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _param = {
                        liveId:this.$props.liveId,
                        ids: this.multipleSelection
                    }
                    pldelUserInfo(_param).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                        } else {
                            this.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            del: function (data) {
                this.$confirm('确定删除【' + data.nickname + '】吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _param = {
                        liveId:this.$props.liveId,
                        id: data._id
                    }
                    delUserInfo(_param).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                        } else {
                            this.msgError(res.msg);
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            chakan:function(e){

                this.$router.push({ path: '/live/userinfodetail', query: { liveId: this.$props.liveId,live_user_id: e.live_user_id,'goback': location.href} });

            },
            yaoqingzhujiao(e){
                this.$router.push({ path: '/live/YaoQingDetail', query: { liveId: this.$props.liveId,live_user_id: e.live_user_id,'goback': location.href} });
            },
            dianji_xiangqing_click:function(e){
                this.$router.push({ path: '/live/userinfodetail', query: { liveId: this.$props.liveId,live_user_id: e.live_user_id,tab:'shijian','goback': location.href} });
            },
            payorder_click:function(e){
                this.$router.push({ path: '/live/userinfodetail', query: { liveId: this.$props.liveId,live_user_id: e.live_user_id,tab:'paycourse',fliter:1,'goback': location.href} });
            }
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>